<template>
  <div class="div_bg">
    <!--  抽奖结果  -->
    <div class="list_cls">
      <div style="text-align: center;font-size: 26px;color: white;">
        抽奖结果
      </div>
      <hr>
      <div style="font-size: 26px;color: white;">
        {{ lotteryResult.length > 0 ? lotteryResult : '' }}
      </div>
    </div>

    <!--  抽奖  -->
    <div class="lottery_cls">
      <span class="span_cls">{{ gameNumber }}</span>
    </div>

    <div class="btn_div">
      <a-button class="btn_cls2" @click="click">{{ buttonText }}</a-button>
    </div>

    <div class="btn_div3">
      <a-button class="btn_cls" @click="clearAllNum">重置</a-button>
    </div>

    <!--  设置抽奖人数  -->
    <div class="btn_div2" style="color: rgb(236,24,48)">
      <a-button class="btn_cls3" @click="showModal">
        设置抽奖人数
      </a-button>
      <a-modal v-model="visible" title="Modal" ok-text="确认" cancel-text="取消" @ok="hideModal">

        <p>
          活动主题
          <a-input v-model="gameTitle" type="text" placeholder="" @change="onChange3"/>
        </p>
        <p>
          抽奖人数
          <a-input-number id="inputNumber" v-model="maxCount" :min="1" :max="1000" @change="onChange1"/>
        </p>
        <p>
          总中奖人数
          <a-input-number id="inputNumber2" v-model="lotteryCount" :min="1" :max="1000" @change="onChange2"/>
        </p>
      </a-modal>
    </div>

  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'

export default {
  name: 'index',
  data() {
    return {
      gameNumber: 0,
      isCrycle: false,
      buttonText: '开始',
      crycle: null,
      maxCount: 200,
      upperNum: 100,
      lowerNum: 1,
      lotteryCount: 0,
      lotteryResult: [],
      lotteryRsStr: '',
      loStr: [],
      isDisabled: false,
      visible: false,
      gameTitle: ''
    }
  },
  mounted() {
    // 查询当前活动标题
    let _this = this
    _this.lotteryCount = 20
    getAction('/game/getTitle').then(res => {
      //debugger;
      if (res.success) {
        if (res.result != null && res.result.length > 0) {
          _this.gameTitle = res.result

          let lotteryTitle = _this.gameTitle
          // 更新中奖数据
          getAction('/game/list?lotteryTitle=' + lotteryTitle).then(res => {
            //debugger;
            if (res.success) {
              _this.lotteryResult = res.result
            }
          }).catch(error => {

          })
        } else {
          _this.gameTitle = '活动抽奖'
        }
      } else {
        _this.gameTitle = '活动抽奖'
      }
    }).catch(error => {
      _this.gameTitle = '活动抽奖'
    })

  },
  methods: {
    onChange3(val){
      if (this.lotteryResult.length > 0 && this.lotteryResult !== '活动抽奖'){
        this.lotteryResult = [];
      }
    },
    onChange1(value) {
      console.log(value)
      this.maxCount = value
    },
    onChange2(value) {
      console.log(value)
      this.lotteryCount = value
    },
    showModal() {
      this.visible = true
    },
    hideModal() {
      this.visible = false

    },
    clearAllNum() {
      let _this = this
      getAction('/game/clear').then(res => {
        if (res.success) {
          _this.lotteryResult = []
        }
      }).catch(error => {

      })
    },
    getNextNumber(i) {
      i += 1
      if (i > this.maxCount) {
        i = 1
      }
      if (this.lotteryResult.indexOf(i) > -1) {
        return this.getNextNumber(i + 1)
      }
      return i

    },
    click() {
      let _this = this
      //debugger;
      if (_this.lotteryResult.length >= _this.lotteryCount) {
        this.$message.warning('所有号码已抽奖完毕!')
        return
      }

      if (_this.isCrycle) {
        let prizeNumber = _this.gameNumber
        _this.lotteryResult.push(prizeNumber)

        _this.buttonText = '开始'
        clearInterval(_this.crycle)
        _this.isCrycle = false

        //_this.lotteryRsList += prizeNumber;
        console.log(_this.lotteryResult)
        //_this.loStr = [_this.lotteryRsList];

        let lotteryTitle = _this.gameTitle
        postAction('/game/save', { prizeNumber, lotteryTitle }).then(res => {
          console.log(res.result)
          if (res.success) {
            //console.log(res.result);
            _this.lotteryResult = res.result
          }
        })

      } else {

        _this.buttonText = '停止'
        _this.isCrycle = true
        _this.crycle = setInterval(function () {
          if (_this.gameNumber > _this.maxCount) {
            _this.gameNumber = 0
          }

          _this.gameNumber = _this.getNextNumber(_this.gameNumber)

        }, 3)
      }
    },
  },
  watch: {
    gameTitle: {
      handler(newName, oldName) {
       //debugger;
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.div_bg {
  width: 100%;
  height: 100vh;
  background-image: url('~@/assets/lottery_bg.png');
  background-size: 100% 100%;
  position: relative; //绝对定位
}

.list_cls {
  width: 460px;
  background-color: rgba(28, 28, 28, 0.3);
  position: absolute;
  left: 44%;
  top: 2%;
}

.btn_cls {
  color: white;
  font-weight: 400;
  background-color: rgba(28, 28, 28, 0.3);
  border: none;
}

.btn_cls3 {
  background-color: rgb(236,24,48);
  color: rgb(236,24,48);
  font-weight: 400;
  border: none;
}

.btn_cls2 {
  font-size: 50px;
  color: white;
  width: 150px;
  height: 150px;
  font-weight: bold;
  background-color: rgba(28, 28, 28, 0.4);
  border: none;
  border-radius: 50%;
}

.span_cls {
  text-align: center;
  display: block;
}

.lottery_cls {
  width: 340px;
  height: 340px;
  line-height: 360px;
  border-radius: 180px;
  background-color: white;
  font-size: 200px;
  position: absolute;
  right: 5%;
  top: 35%;
}

.btn_div {
  text-align: center;
  position: absolute;
  right: 11%;
  top: 14%;
}

.btn_div2 {
  width: 100px;
  height: 40px;
  text-align: center;
  position: absolute;
  right: 12%;
  top: 2%;
}

.btn_div3 {
  width: 100px;
  height: 40px;
  text-align: center;
  position: absolute;
  right: 4%;
  top: 2%;
}
</style>